@charset "UTF-8";

@import "~/scss/themes/index.scss";


$component-name: 'flex';

/*

.ui-flex // 声明 flex

.ui-flex--row // flex 横向
.ui-flex--column  //flex 竖向

.ui-flex--wrap //flex 自动换行
.ui-flex--nowrap //flex 横向不换行

.ui-flex--space-between //flex 横向两端对齐
.ui-flex--end //flex 横向右对齐
.ui-flex--center  //flex 横向居中

.ui-flex--vcenter //flex 垂直居中对齐

*/

.ui-#{$component-name} {
	display: flex;
	flex-direction: row;
	align-items: center;

	&.#{$component-name}--row {
		flex-direction: row;
	}
	&.#{$component-name}--column {
		flex-direction: column;
	}
	// 换行样式
	&.#{$component-name}--wrap {
		flex-wrap: wrap;
	}
	&.#{$component-name}--nowrap {
		flex-direction: nowrap;
	}

	// 横向样式
	&.#{$component-name}--center {
		justify-content: center;
	}
	&.#{$component-name}--space-between {
		justify-content: space-between;
	}
	&.#{$component-name}--end {
		justify-content: flex-end;
	}

	// 纵向样式
	&.#{$component-name}--vcenter {
		align-items: center;
	}
}

.ui-flex-1 {
	flex: 1;
}
.ui-flex-0 {
	flex: 0 0 1;
}
